<script setup>
	import { onMounted, ref } from 'vue'
	import { onLoad, onReachBottom } from '@dcloudio/uni-app'
	import { http } from '@/utils/http.js'
	import { parseTime } from '@/utils/index.js'

	//tab
	const activeIndex = ref(1)
	function chooseTab(name, title) {
		console.log(name, title)
		currentPage.value = 1
		noticeDetail.value = []
		dealList.value = []
		activeIndex.value = name
		if (activeIndex.value == 1) {
			getNoticeList()
		} else {
			getDealList()
		}
	}

	// 消息通知列表
	const noticeDetail = ref([])
	const currentPage = ref(1)
	async function getNoticeList() {
		const res = await http.request({
			url: '/api/user/myMessage',
			method: 'POST',
			data: {
				page: currentPage.value,
				limit: 10,
			},
		})
		console.log(res)
		noticeDetail.value = [...noticeDetail.value, ...res.data]
	}

	//交易记录列表
	const dealList = ref([])
	async function getDealList() {
		const res = await http.request({
			url: '/api//user/biddingMsg',
			method: 'POST',
			data: {
				page: currentPage.value,
				limit: 10,
			},
		})
		console.log(res)
		dealList.value = [...dealList.value, ...res.data]
	}

	function getMoreNotice() {
		++currentPage.value
		getNoticeList()
	}

	function getMoreDetail() {
		++currentPage.value
		getDealList()
	}

	onMounted(() => {
		noticeDetail.value = []
		currentPage.value = 1
		getNoticeList()
	})
</script>

<template>
	<view class="notice-content">
		<y-tabs v-model="activeIndex" sticky @change="chooseTab">
			<y-tab class="y-tab-virtual" :title="'开赏记录'" name="1">
				<scroll-view
					scroll-y="true"
					class="scroll-Y"
					style="height: 90vh"
					@scrolltolower="getMoreNotice"
				>
					<view style="padding: 1rpx; background-color: #eeecec">
						<!-- 内容区域 -->
						<view
							class="notice-list"
							v-for="(item, index) in noticeDetail"
							:key="'notice' + index"
						>
							<view class="desc">
								<view class="name">盲盒名字:</view>
								<view class="box-type">{{ item.name }}</view>
							</view>

							<view class="desc">
								<view class="name">箱子:</view>
								<view class="box-type"
									>第{{ item.case_name }}箱</view
								>
							</view>

							<view class="desc">
								<view class="name">领取时间:</view>
								<view class="box-type">{{
									parseTime(item.add_time)
								}}</view>
							</view>
							<view class="desc">
								<view class="name">该箱获得数量:</view>
								<view class="box-type"
									>{{ item.goods_info.length }}件</view
								>
							</view>

							<!-- /分割线 -->
							<view class="item-border"></view>

							<view
								class="desc borderline"
								v-for="(goods, index) in item.goods_info"
								:key="'goods' + index"
							>
								<view
									class=""
									style="
										margin-left: 15rpx;
										font-size: 24rpx;
										color: #7863ff;
										flex-shrink: 0;
									"
								>
									【{{ goods.rule_name }}】
								</view>
								<image
									:src="goods.goods_img"
									class="itemimg"
								></image>
								<view class="box-type goodsname">{{
									goods.goods_name
								}}</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</y-tab>
			<y-tab class="y-tab-virtual" :title="'交易记录'" name="2">
				<scroll-view
					scroll-y="true"
					class="scroll-Y"
					style="height: 90vh"
					@scrolltolower="getMoreDetail"
				>
					<view class="" style="margin-top: 34rpx">
						<view
							class="deal-item"
							v-for="item in dealList"
							:key="item.id"
							>{{ item.title }}</view
						>
					</view>
				</scroll-view>
			</y-tab>
		</y-tabs>
	</view>
</template>

<style lang="scss" scoped>
	page {
		background-color: #f4f4f4;
	}
	.notice-content {
		height: 100vh;
		padding-top: 64rpx;
		box-sizing: border-box;
		background-color: #eeecec;
	}
	.notice-list {
		padding-bottom: 50rpx;
		border: 1rpx solid #eeeeee;
		margin: 30rpx auto;
		border-radius: 16rpx;
		width: 95vw;
		height: 100%;
		background-color: #fff;
		font-family: OPPOSans;
		font-weight: 500;
		font-size: 26rpx;
		color: #9b9b9d;
		display: flex;
		flex-direction: column;
	}
	.desc {
		display: flex;
		flex-direction: row;
		margin-top: 30rpx;
		align-items: center;
	}
	.name {
		margin-left: 30rpx;
		width: 170rpx;
	}
	.box-type {
		margin-left: 20rpx;
	}
	.item-border {
		margin-top: 40rpx;
		background-color: #eeecec;
		height: 10rpx;
	}
	.itemimg {
		width: 60rpx;
		height: 60rpx;
		border-radius: 8rpx;
		// margin-left: 30rpx;
	}
	.borderline {
		border-bottom: 1rpx solid #f5f5f5;
		padding-bottom: 30rpx;
		&:last-child {
			border-bottom: none;
			padding-bottom: 0;
		}
	}
	.goodsname {
		margin-left: 20rpx;
		width: 70vw;
		font-size: 28rpx;
		color: #3d3d3d;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.deal-item {
		// height: 118rpx;
		padding: 20rpx;
		margin: 0 30rpx;
		margin-bottom: 24rpx;
		border-radius: 8rpx;
		background-color: #fff;
		box-sizing: border-box;
		font-size: 24rpx;
		line-height: normal;
	}
	/* #ifdef MP-QQ || MP-BAIDU || MP-TOUTIAO || MP-LARK || MP-KUAISHOU */
	.y-tab-virtual {
		position: relative;
		flex-shrink: 0;
		width: 100%;
		height: 100%;
	}
	/* #endif */
	@keyframes scroll {
		0% {
			transform: translateX(0);
		}
		100% {
			transform: translateX(
				calc(-426rpx)
			); /* 单个图片宽度 * 图片数量的一半 */
		}
	}
	::v-deep .y-tabs {
		// padding-top: 30rpx;
		top: -30rpx;
		border-radius: 36rpx;
		// background-color: #fff;
	}
	::v-deep .y-tabs__content {
		// height: 100vh;
		// overflow: auto !important;
	}
	::v-deep .y-tab__pane {
		overflow: auto;
		// height: 100vh !important;
	}
	::v-deep .y-tabs__wrap {
		background-color: #eeecec !important;
	}
	::v-deep .y-tabs__scroll {
		width: 360rpx !important;
		height: 64rpx;
		left: 25%;
	}
	::v-deep .y-tab {
		height: 64rpx !important;
		margin: 0 20rpx;
		color: #1a1a1a !important;
		font-weight: 500 !important;
		z-index: 9 !important;
	}
	::v-deep .y-tabs__nav {
		border-radius: 32rpx;
		background-color: #fff;
	}
	::v-deep .y-tabs__nav .is-active {
		border-radius: 32rpx !important;
		margin: 0 !important;
		padding: 0 34rpx !important;
		background-color: $all-color !important;
		color: #fff !important;
	}
	::v-deep .y-tab__text {
		font-size: 28rpx;
	}
	::v-deep .y-tabs__bar {
		display: none !important;
		// width: 50% !important;
		// height: 100% !important;
		// transform: translate3d(0,0,0) !important;
		// border-radius: 32rpx !important;
		// bottom: 0 !important;
		// background-color: #7863ff !important;
	}
</style>
